<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer
      :title="title"
      v-model="visible"
      width="720"
      draggable
      :mask-closable="type == '0'"
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <Form label-colon v-show="type != '2'">
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="商品ID">
                {{ form.id }}
                <Tooltip trigger="hover" placement="right" content="账户已禁用">
                  <Icon
                    v-show="form.status == -1"
                    type="md-lock"
                    size="18"
                    style="margin-left: 10px; cursor: pointer"
                  />
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Form
          ref="form"
          :model="form"
          :rules="formValidate"
          label-position="top"
        >
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="上新名称" prop="goodName">
                <Input v-model="form.goodName" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="上新品牌" prop="goodBrand">
                <Input v-model="form.goodBrand" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="上新价格" prop="goodPrice">
                <Input v-model="form.goodPrice" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="上新链接" prop="goodUrl">
                <Input v-model="form.goodUrl" />
              </FormItem>
            </Col>
          </Row>
					<Row :gutter="32">
					  <Col span="12">
					    <FormItem label="发售时间" prop="goodTime">
					      <DatePicker
					        v-model="form.goodTime"
									@on-change="changeDate"
					        style="display: block"
					        type="date"
					        transfer
					      ></DatePicker>
					    </FormItem>
					  </Col>
					</Row>
              <FormItem label="图片">
                <upload-pic-thumb v-model="pics"></upload-pic-thumb>
              </FormItem>
        </Form>
      </div>
      <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit"
          >提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { insertOrUpdateNewProduct, getNewProductDetail } from "@/api/index";
import {
  validateUsername,
  validateMobile,
  validatePassword,
} from "@/libs/validate";
import uploadPicThumb from "@/views/my-components/xboot/upload-pic-thumb";
export default {
  name: "user",
  components: {
    uploadPicThumb
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      pics: [],
      visible: this.value,
      title: "",
      submitLoading: false,
      maxHeight: 510,
      form: {
        address: [],
      },
      formValidate: {
        // 表单验证规则
        username: [
          { required: true, message: "请输入登录账号", trigger: "change" },
          { validator: validateUsername, trigger: "change" },
        ],
        nickname: [
          { required: true, message: "请输入用户名", trigger: "change" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "change" },
          { validator: validateMobile, trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { validator: validatePassword, trigger: "change" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址" },
          { type: "email", message: "邮箱格式不正确" },
        ]
      },
    };
  },
  methods: {
		changeDate(e) {
			console.log(e);
			this.form.goodTime = e;
		},
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
					this.form.goodPics = this.pics.join(',');
          if (typeof this.form.goodTime == "object") {
            this.form.goodTime = this.format(this.form.goodTime, "yyyy-MM-dd");
          }
          if (this.type == "1") {
            // 编辑
            this.submitLoading = true;
            insertOrUpdateNewProduct(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          } else {
            // 添加
            this.submitLoading = true;
            insertOrUpdateNewProduct(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          }
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑商品";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加商品";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "商品详情";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      if (this.type == "0" || this.type == "1") {
        // 回显数据
        let data = this.data;
				getNewProductDetail({id: this.data.id}).then(res => {
					if (res.status === 200) {
						this.form = {
							goodBrand: res.result.goodBrand,
							goodName: res.result.goodName,
							goodPrice: res.result.goodPrice,
							goodTime: res.result.goodTime,
							goodUrl: res.result.goodUrl,
							id: res.result.id
						};
						this.pics = res.result.goodPicList;
					}
				}) 
				
				// this.form = this.data;
				// this.pics = this.data.goodPicList;
        
        // 回显
        this.form = data;
      } else {
        // 添加
        this.form = {
          goodBrand: "",
          goodName: "",
          goodPics: "",
					goodPrice: "",
					goodTime: "",
					goodUrl: ""
        };
				this.pics = [];
      }
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  }
};
</script>

<style lang="less">
@import "../../../styles/drawer-common.less";
</style>